<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>书单详情</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
</head>
<body>

<div class="container" style="max-width: 700px">
    <h2 class="page-header" style="margin-top: 50px">书单详情</h2>
    <div class="well">
        <p>
            <strong>
                书名：<span th:text="${book.name}">斗破苍穹</span>
            </strong>
        </p>
        <p>
            <strong>
                作者：<span th:text="${book.author}">天蚕土豆</span>
            </strong>
        </p>
        <p>
            <strong>
                说明：<span th:text="${book.description}">玄幻</span>
            </strong>
        </p>
        <p th:switch="${book.status}">
            <strong>
                状态：
                <span th:case="0">想读</span>
                <span th:case="1">在读</span>
                <span th:case="2">已读</span>
            </strong>

        </p>

    </div>
    <div class="alert alert-success" th:unless="${book.status ==0}">
        <strong>不错</strong>，你已经开始行动啦
    </div>
    <div class="alert alert-warning" th:if="${book.status == 0}">
        <strong>注意</strong>，你还没开始行动
    </div>

    <a href="javascript:history.go(-1)" class="btn btn-default">返回</a>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
</body>
</html>